DESIGN DEMO

SUI hair atelier
予約アプリ ― 日時を選ぶまでの体験

架空の美容室「SUI hair atelier」の予約フローを、メニュー選択から完了画面まで通して触れる形にまとめました。右のモックはそのまま操作できます。迷わず日時までたどり着けることだけを目的に、情報量を絞っています。

このデモについて

架空の店舗です。料金・スタッフ・空き状況はすべて固定のサンプルで、現実の予約枠ではありません。
実際の予約は作成されません。個人情報の入力・送信・保存は行いません。
決済、会員登録、通知、キャンセル処理は未実装です。
画面幅 390px を基準に設計しています。

単体で動くファイル：booking.html

SUI

HAIR ATELIER

架空店・体験デモ

STEP {{ step }} / 5 {{ stepName }}

{{ st.name }}

{{ st.name }}

これは予約体験のデモです。実際の予約は作成されません。

メニューを選ぶ

料金はすべて税込。指名料・追加料金はありません。

担当者を選ぶ

指名料はかかりません。名前・得意分野はサンプルです。

日時を選ぶ

2026年10月1日(木)〜7日(水)の固定サンプルです。現実の空き枠ではありません。

{{ d.dow }} {{ d.day }} 定休

✓選択

-

時間

営業時間 10:00〜19:00 / {{ durationNote }}

まず上で日付を選んでください。

{{ t.label }} この枠は満席です
（固定サンプル）満席

内容を確認する

この内容でよければ下のボタンへ。直したい項目は「戻る」で選び直せます。

メニュー {{ menuName }}

担当 {{ stylistName }}

日時 {{ dateText }}
{{ timeRangeText }}

所要時間 {{ durationText }}

税込総額 {{ totalText }}

指名料・追加料金はありません。お支払い方法の選択、会員登録、キャンセル処理はこのデモには含まれません。

予約体験が完了しました

実際の予約は作成されていません。
送信・保存・通知は一切行っていません。

メニュー {{ menuName }}

担当 {{ stylistName }}

日時 {{ dateText }}
{{ timeRangeText }}

所要時間 {{ durationText }}

税込総額 {{ totalText }}

!{{ error }}